import React from 'react'
import { Menu } from 'antd';
import { Layout } from 'antd';
import style from './Sidemenu.module.css'
import MenuItem from 'antd/lib/menu/MenuItem';
import SubMenu from 'antd/lib/menu/SubMenu';
import { useNavigate, useLocation } from 'react-router';
import { HomeTwoTone, 
         SmileTwoTone, 
         MehTwoTone, 
         SettingTwoTone,
         PauseCircleTwoTone,
         WarningTwoTone,
         SnippetsTwoTone,
         CopyTwoTone,
         MailTwoTone,
         ControlTwoTone,
         BulbTwoTone,
         FundTwoTone,
         FileTextTwoTone,
         NotificationTwoTone,
         SoundTwoTone,
         FunnelPlotTwoTone,
         ReconciliationTwoTone
        } from '@ant-design/icons';
import { connect } from 'react-redux';

const { Sider } = Layout;

function Sidebar(props) {
  let {role:{rights:{checked}}} = JSON.parse(localStorage.getItem('token'));
  const path = useLocation().pathname;
  const menuPath = ['/' + path.split('/')[1] + '/' + path.split('/')[2]];
  const {collapsed, menu} = props;
  const navigate = useNavigate();
  const iconList = {
    '/sandbox/home':<HomeTwoTone />,
    '/sandbox/user':<SmileTwoTone />,
    '/sandbox/user/list':<MehTwoTone />,
    '/sandbox/right':<SettingTwoTone />,
    '/sandbox/right/rolelist':<PauseCircleTwoTone />,
    '/sandbox/right/rightlist':<WarningTwoTone />,
    '/sandbox/news':<SnippetsTwoTone />,
    '/sandbox/news/add':<CopyTwoTone />,
    '/sandbox/news/draft':<MailTwoTone />,
    '/sandbox/news/category':<ControlTwoTone />,
    '/sandbox/audit':<BulbTwoTone />,
    '/sandbox/audit/audit':<FundTwoTone />,
    '/sandbox/audit/list':<FileTextTwoTone />,
    '/sandbox/publish':<NotificationTwoTone />,
    '/sandbox/publish/unpublished':<SoundTwoTone />,
    '/sandbox/publish/published':<FunnelPlotTwoTone />,
    '/sandbox/publish/sunset':<ReconciliationTwoTone />
  }
  function Menumaker(menu){
    return(
      // eslint-disable-next-line array-callback-return
      menu.map(item => {
         if(item.pagepermisson && checked.includes(item.key)){
          if(item.children?.length > 0){    //如果有.children这个属性，则判断其长度是否大于0
            return(
              <SubMenu key={item.key} icon={iconList[item.key]} title={item.title}>
                {Menumaker(item.children)}
              </SubMenu>
            )
          }
          else {
            return(
              <MenuItem key={item.key} icon={iconList[item.key]} onClick={()=>{
                navigate(item.key)
              }}>
                <span>{item.title}</span>
              </MenuItem>
            )
          }
        }
      })
    )
  }
  return (
    <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className={style.titlebox}>
          <div className={style.title}>全球新闻发布系统</div>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={path}
          defaultOpenKeys={menuPath}
        >
          {Menumaker(menu)}
        </Menu>
    </Sider>
  )
}

const mapStateToProps = ( state ) => {
  return {
    collapsed: state.CollapsedReducer.collapsed
  }
}

export default connect(mapStateToProps)(Sidebar)